<template>
  <div :class="boxClass" :style="boxStyle">
    <a-checkbox :checked="innerValue" v-bind="cellProps" @change="handleChange" />
  </div>
</template>

<script lang="ts">
  import { computed, defineComponent } from 'vue'
  import { JVxeComponent } from '/@/components/jeecg/JVxeTable/types'
  import { useJVxeComponent, useJVxeCompProps } from '/@/components/jeecg/JVxeTable/hooks'
  import { isArray, isBoolean } from '/@/utils/is'

  export default defineComponent({
    name: 'JVxeCheckboxCell',
    props: useJVxeCompProps(),
    setup(props: JVxeComponent.Props) {
      const { innerValue, cellProps, originColumn, scrolling, handleChangeCommon } = useJVxeComponent(props)
      // 是否启用边框
      const bordered = computed(() => !!props.renderOptions.bordered)
      // box 类名
      const boxClass = computed(() => {
        return {
          'j-vxe-checkbox': true,
          'no-animation': scrolling.value,
        }
      })
      // box 行内样式
      const boxStyle = computed(() => {
        const style = {}
        // 如果有边框且未设置align属性，就强制居中
        if (bordered.value && !originColumn.value.align) {
          style['text-align'] = 'center'
        }
        return style
      })

      // onChange 事件
      function handleChange(event) {
        handleChangeCommon(event.target.checked)
      }

      return {
        cellProps,
        innerValue,
        boxClass,
        boxStyle,
        handleChange,
      }
    },

    // 【组件增强】注释详见：JVxeComponent.Enhanced
    enhanced: {
      switches: {
        visible: true,
      },
      getValue(value, ctx) {
        let { context } = ctx!
        let { originColumn } = context
        // 处理 customValue
        if (isArray(originColumn.value.customValue)) {
          let customValue = getCustomValue(originColumn.value)
          if (isBoolean(value)) {
            return value ? customValue[0] : customValue[1]
          } else {
            return value
          }
        } else {
          return value
        }
      },
      setValue(value, ctx) {
        let { context } = ctx!
        let { originColumn } = context
        // 判断是否设定了customValue（自定义值）
        if (isArray(originColumn.value.customValue)) {
          let customValue = getCustomValue(originColumn.value)
          return neverNull(value).toString() === customValue[0].toString()
        } else {
          return !!value
        }
      },
      createValue(_defaultValue, ctx) {
        let { context } = ctx!
        let {
          column: { params: col },
        } = context
        if (isArray(col.customValue)) {
          let customValue = getCustomValue(col)
          return col.defaultChecked ? customValue[0] : customValue[1]
        } else {
          return !!col.defaultChecked
        }
      },
    } as JVxeComponent.EnhancedPartial,
  })

  function neverNull(value, def?) {
    return value == null ? neverNull(def, '') : value
  }

  function getCustomValue(col) {
    let customTrue = neverNull(col.customValue[0], true)
    let customFalse = neverNull(col.customValue[1], false)
    return [customTrue, customFalse]
  }
</script>

<style lang="less">
  // 关闭动画，防止滚动时动态赋值出现问题
  .j-vxe-checkbox.no-animation {
    .ant-checkbox-inner,
    .ant-checkbox-inner::after {
      transition: none !important;
    }
  }
</style>
